<template>
  <div id="parallel" class="parallel"></div>
</template>

<script>
import dataApi from "@/api/data";
export default {
  props: {
      city:String,
      parent_items:Array
  },
  data() {
    return {
      items: [],
      chart: null,
      child_city:'北京'
    };
  },
  watch:{
      city(val){
          this.child_city = val
          //console.log(this.child_city);
          //this.prepareData()
           this.initChart()
      },
      parent_items(val){
        this.items = val
        this.initChart()
      }
  },
  mounted() {
    //this.prepareData();
  },
  methods: {
    // prepareData() {
    //   this.items = dataApi.getData().then((response) => {
    //     this.items = response.data.items;
    //     this.initChart();
    //   });
    // },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("parallel"));
      let option = this.setChart();
      this.chart.setOption(option);

       // 注册窗口变化回调函数
      window.addEventListener("resize",()=>{
          this.resizeChart()
      })
    },
    setChart() {
      this.databj = this.getData();
      this.schema = [
        { name: "年份", index: 0, text: "年份" },
        { name: "活立木总蓄积", index: 1, text: "活立木总蓄积" },
        { name: "森林蓄积", index: 2, text: "森林蓄积" },
        { name: "人工林蓄积", index: 3, text: "人工林蓄积" },
        { name: "天然林蓄积", index: 4, text: "天然林蓄积" },
        {
          name: "乔木林单位面积蓄积量",
          index: 5,
          text: "乔木林单位面积蓄积量",
        },
      ];
      this.lineStyle = {
        normal: {
          width: 5,
          opacity: 1,
        },
      };
      let myChart = this.chart;
      let option = (option = {
        backgroundColor: "#282a36",
        title: {
          text: this.child_city + " 林地资源统计",
          left: "center",
          textStyle:{
              color:"rgb(238, 197, 102)",
              fontSize:14
          }
        },
        tooltip: {
          padding: 10,
          backgroundColor: "#222",
          borderColor: "#777",
          borderWidth: 1,
          formatter: function (obj) {
            var value = obj[0].value;
            return (
              '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
              obj[0].seriesName +
              " " +
              value[0] +
              "年份：" +
              value[7] +
              "</div>" +
              this.schema[1].text +
              "：" +
              value[1] +
              "<br>" +
              this.schema[2].text +
              "：" +
              value[2] +
              "<br>" +
              this.schema[3].text +
              "：" +
              value[3] +
              "<br>" +
              this.schema[4].text +
              "：" +
              value[4] +
              "<br>" +
              this.schema[5].text +
              "：" +
              value[5] +
              "<br>"
            );
          },
        },
        // dataZoom: {
        //     show: true,
        //     orient: 'vertical',
        //     parallelAxisIndex: [0]
        // },
        parallelAxis: [
          {
            dim: 0,
            name: this.schema[0].text,
            inverse: true,
            min: 2013,
            max: 2018,
            nameLocation: "start",
          },
          { dim: 1, name: this.schema[1].text },
          { dim: 2, name: this.schema[2].text },
          { dim: 3, name: this.schema[3].text },
          { dim: 4, name: this.schema[4].text },
          { dim: 5, name: this.schema[5].text },
        ],
        visualMap: {
          show: true,
          bottom:'20%',
          orient: "horizontal",
          min: this.getMin(),
          max: this.getMax(),
          dimension: 2,
          inRange: {
            color: ["orange", "yellow", "green"],
            // colorAlpha: [0, 1]
          },
          text: ['高','低'],
          textStyle:{
            color: '#fff'
          }
        },
        parallel: {
          left: "5%",
          right: "18%",
          bottom: 100,
          parallelAxisDefault: {
            type: "value",
            name: "活立木总蓄积",
            nameLocation: "end",
            nameGap: 20,
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
            },
            axisLine: {
              lineStyle: {
                color: "#aaa",
              },
            },
            axisTick: {
              lineStyle: {
                color: "#777",
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: this.child_city,
            type: "parallel",
            lineStyle: this.lineStyle,
            data: this.databj,
          },
        ],
      });
      return option;
    },
    getMax(){
        let max = Number.MIN_VALUE
        for (let i = 0; i < this.items.length; i++) {
            if (this.items[i]["city"] === this.child_city) {
                if(max < this.items[i]["活立木总蓄积"]){
                    max = this.items[i]["活立木总蓄积"]
                }
            }
        }
        //console.log(max);
        return max;
    },
    getMin(){
        let min = Number.MAX_VALUE
         for (let i = 0; i < this.items.length; i++) {
            if (this.items[i]["city"] === this.child_city) {
                 if(min > this.items[i]["活立木总蓄积"]){
                    min = this.items[i]["活立木总蓄积"]
                }
            }
        }
        //console.log(min);
        return min
    },
    getData() {
      let res = [];
      let Res = [];
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i]["city"] === this.child_city) {
          res.push(Number(this.items[i]["年份"]));
          res.push(Number(this.items[i]["活立木总蓄积"]));
          res.push(Number(this.items[i]["森林蓄积"]));
          res.push(Number(this.items[i]["人工林蓄积"]));
          res.push(Number(this.items[i]["天然林蓄积"]));
          res.push(Number(this.items[i]["乔木林单位面积蓄积量"]));
          Res.push(res);
          res = [];
        }
      }
      //console.log(Res);
      return Res;
    },
    resizeChart(){
        this.chart.resize()
    }
  },
};
</script>

<style>
.parallel {
  width: 100%;
  height: calc(30vh);
}
</style>